<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            margin: 20px auto;
            border: 1px solid #ccc;
            padding: 20px;
        }
        
        .box .header h2 {
            text-align: center;
        }
        
        .box .header .select {
            font-size: 30px;
            color: red;
        }
        
        .box .list {
            display: flex;
            flex-wrap: wrap;
            font-size: 20px;
        }
        
        .box .list .item {
            padding: 4px 8px;
            border: 1px solid #ccc;
            margin: 6px;
            border-radius: 4px;
        }
        /* active高亮选中 */
        
        .box .list .active {
            background-color: rgb(155, 17, 17);
            color: #fff;
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div class="header">
                <h2>随机点名器</h2>
                <div>
                    <button id="start">开始</button>
                    <button id="stop">停止</button>
                    <p>恭喜: <span class="select">谁呢?</span></p>
                </div>
            </div>
            <div class="list">
                <!-- <div class="item">张三1</div>
                <div class="item active">张三2</div> -->
            </div>
        </div>
    </div>
    <script>
        // 缓存一些节点
        var listEle = document.querySelector('.list')
        var selEle = document.querySelector('.select')
        var startEle = document.getElementById('start')
        var stopEle = document.getElementById('stop')

        // 取随机数
        function randomInt(min, max) {
            return min + parseInt(Math.random() * (max - min + 1))
        }

        var stus = [
            '沈俊杰', '罗炜杰', '魏志贤', '金凯', '赖安杰', '陈天富', '肖小辉', '王佳乐', '尹鹏', '蔡红林', '位红亮', '王慧慧', '鹏鹏', '杨可', '张景生', '王子荣', '易鑫', '张茂林', '刁文', '黄发盛', '罗祥', '梁成', '喻竲海', '张海涵', '钟玉婷', '黄然', '吴霞', '殷勇', '杜元萍', '冯旭', '郑思怡', '罗利', '王旭鹏', '冯文彬', '庞博', '金凯', '凯凯', '小金', '金金'
        ]


        console.log(stus.length);

        // 1. 循环所有的同学数据，创建div标签，最后拼接起来作为 class=list的标签内容
        var htmlStr = ''
        for (var i = 0; i < stus.length; i++) {
            htmlStr += '<div class="item">' + stus[i] + '</div>'
        }
        listEle.innerHTML = htmlStr

        // 2. 开始随机点名
        var timer = null
        var randomIndex // 记录当前选中的随机下标
        startEle.onclick = function() {
            // 如果当前定时器是否正在运行，
            if (timer) {
                return // 则终止程序的执行
            }
            timer = setInterval(function() {
                // a: 随机取数组的下标
                // do {
                randomIndex = randomInt(0, stus.length - 1)
                    // } while (stus[randomIndex].includes('金'))
                    // b: 通过下标找到对应学员的DOM节点，并添加上类名active
                    // 排他法：其他元素先要移除active,当前元素添加active
                var children = listEle.children // children获取所有的子元素节点
                for (var i = 0; i < children.length; i++) {
                    children[i].classList.remove('active')
                }
                children[randomIndex].classList.add('active')
            }, 16)
        }

        // 3. 停止点名操作
        stopEle.onclick = function() {
            // a: 清除定时器
            clearInterval(timer) // 清除动作
            timer = null // 赋值假(恢复到初始状态)
                // b: 展示当前选中的同学名
            selEle.innerText = stus[randomIndex]
        }
    </script>
</body>

</html>